웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

[자바스크립트] 이미지 확장자만 제거하는 방법

Last Modified : 2020-11-18 / Created : 2020-08-06
4,986
View Count

자바스크립트에서 이미지 파일의 확장자만 삭제한 이름만 가져오려면 어떻게 하면 되는지 알아봅니다.




# 자바스크립트 이미지 파일 중 확장자만 제거 한 파일 이름 가져오기


일단 확장자를 제거하는 것이 가장 좋은 방법입니다. 이때 중간에 . 기호가 포함되었을 수 있으므로 제일 마지막에 포함된 확장자 정보를 삭제해야 됩니다.

가장 간단한 방법은 아무래도 정규표현식을 사용하는 방법입니다. 정규표현식에서 이미지의 확장자이면서 맨 뒤에 포함된 것만 빈 값으로 바꾸면 되겠죠. 그래서 필요한 정규식은 아래와 같습니다.

(.png|.jpg|.jpeg|.gif)$


이제 실제 코드에 적용해보겠습니다. 아래와 같이 파일명이 담긴 변수 myFile에서 확장자만 제거 후 가져와보려고 합니다.
let myFile = 'webisfree.jpg';
let result = myFile.replace(/(.png|.jpg|.jpeg|.gif)$/, '');

console.log(result);
'webisfree' // 확장자만 제거되었음

간단하게 이미지에서 확장자만 제거 된 문자열만 얻을 수 있었습니다.

Previous

자바스크립트 Canvas 요소를 이미지로 저장 후 서버에 ajax로 저장하는 방법

Previous

자바스크립트 history 객체 페이지 갱신 없이 페이지 전환, pushstate